<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="description" content="">
	<meta name="author" content="">

	<title>观众直播间</title>
	<link rel="shortcut icon" href="images/foodie.ico" />
	<!-- Bootstrap Core CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- Custom CSS -->
	<link rel="stylesheet" href="css/style.css">


	<!-- jQuery and Modernizr-->
	<script src="js/jquery.min.js"></script>

	<script src="js/kurento-utils.js"></script>
	<script src="js/live.js"></script>




	<!-- Custom CSS -->
	<link rel="stylesheet" href="css/style.css">

	<!-- jQuery and Modernizr-->
	<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
	<!-- Core JavaScript Files -->
	<script src="js/bootstrap.min.js"></script>


</head>

<body>
<header>
	<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-6">
					<strong>欢迎来到直播间!</strong>
				</div>
				<div class="col-md-6 col-sm-6">
					<ul class="list-inline top-link link">
						<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
						<li><a href="#"><i class="fa fa-comments"></i> 联系</a></li>
						<li><a href="#"><i class="fa fa-question-circle"></i> 帮助</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>

	<!--Navigation-->
	<nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">菜单栏</span>
				<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li><a href="http://120.77.47.215:8080/foodie-shop"><i class="fa fa-home"></i> 首页</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 账号</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="#">登录</a></li>
									<li><a href="#">注册</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="#"><i class="fa fa-envelope"></i> 联系</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="header-slide">
		<div id="owl-demo" class="owl-carousel">
		</div>
	</div>
</header>
<!-- Header -->

<!-- /////////////////////////////////////////Content -->
<div id="page-content" class="single-page">
	<div class="container">
		<div class="row">
			<div id="main-content" class="col-md-8 my-top">
				<div class="wrap-vid">
					<video id="video" controls="controls"  autoplay width="100%" height="100%"></video>
				</div>
				<div class="share">
					<ul class="list-inline center">
						<li><a href="#" id="checkLive" class="btn btn-twitter my-sub-top"><i class="fa "></i> 查看直播</a></li>
						<li><a href="#" id="stop" class="btn btn-twitter my-sub-top"><i class="fa "></i> 停止观看</a></li>
						<li><a href="#" class="btn btn-google my-sub-top"><i class="fa "></i> 哔哩哔哩</a></li>
						<li><a href="#" class="btn btn-twitter my-sub-top"><i class="fa "></i> 抖音</a></li>
						<li><a href="#" class="btn btn-pinterest my-sub-top"><i class="fa "></i> 快手</a></li>
						<li><a href="#" class="btn btn-facebook my-sub-top"><i class="fa "></i> 分享</a></li>
					</ul>
				</div>



				<!--					<div class="line"></div>-->

			</div>
			<div id="sidebar" class="col-md-4 my-top">
				<!---- Start Widget ---->
				<div class="widget wid-follow">
					<div class="heading"><h4><i class="fa fa-users"></i> 关注</h4></div>
					<div class="content">
						<ul class="list-inline">
							<li>
								<a href="#/">
									<div class="box-facebook my-top">
										<span class="fa fa-facebook fa-2x icon"></span>
										<span>0</span>
										<span>粉丝</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#/">
									<div class="box-twitter my-top">
										<span class="fa fa-twitter fa-2x icon"></span>
										<span>0</span>
										<span>粉丝</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#/">
									<div class="box-google my-top">
										<span class="fa fa-google-plus fa-2x icon"></span>
										<span>0</span>
										<span>粉丝</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--						<div class="line"></div>-->
				</div>
				<!--					&lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;-->
				<!--					<div class="widget wid-post">-->

				<!--					</div>-->
				<!--					&lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;-->
				<!--					<div class="widget wid-news">-->

				<!--					</div>-->
			</div>
		</div>
	</div>
</div>

<footer  class="my-top">
	<div class="bottom-footer">
		<div class="container">
			<div class="row">
				<div class="col-md-7 col-sm-7 copyright">
					<span>请使用Chrome、Firefox、Edge浏览器，才能支持WebRTC直播</span>
				</div>
				<div class="col-md-5 col-sm-5 link">
					<div class="menu-footer-menu-container">
						<ul id="menu-footer-menu" class="menu list-inline">
							<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
							<li><a href="#"><i class="fa fa-comments"></i> 联系</a></li>
							<li><a href="#"><i class="fa fa-question-circle"></i> 帮助</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- Footer -->

<!-- JS -->
<script src="owl-carousel/owl.carousel.js"></script>
<script>
	$(document).ready(function() {
		$("#owl-demo").owlCarousel({
			autoPlay: 3000,
			items : 5,
			itemsDesktop : [1199,4],
			itemsDesktopSmall : [979,4]
		});

	});

</script>

</body>
</html>
